<template>
  <div>
    <div class="container" :style="'background-image:' + 'url(' + Bigbg + ')'">
      <!-- 登录框 -->
      <div class="login-modal">
        <!-- 选择账号登录 扫码登录 -->
        <div class="select">
          <!-- 账号登录 -->
          <div class="acc-img" @click="Scanlogin2">
            <img :src="accimg" alt="" />
          </div>
          <!-- 扫码登录 -->
          <div class="scan-img" v-show="isshow2" @click="Accountlogin">
            <img :src="scanimg" alt="" />
          </div>
        </div>
        <keep-alive exclude="Account">
          <component :is="who"></component>
        </keep-alive>
      </div>
      <div class="footer">
        <p>
          <span>&copy; 2005 - 2021广东欢太版权所有粤ICP备14056724号-2 </span>
          <span> 联系方式:4001-999-666</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoods, userLogin } from "../assets/request";
import Account from "../components/Account_login.vue";
import Scanlogin from "../components/Scan_login.vue";

export default {
  components: {
    Account,
    Scanlogin,
  },
  data() {
    return {
      who: "Account",
      accimg: "",
      scanimg: "",
      Bigbg: "",
      goods: [],
      penguin: "",
      uname: "",
      pwd: "",
      isshow2: true,
      QRimg: "",
      QRimg2: "",
    };
  },
  async created() {
    await getGoods({
      project_id: 78,
      limit: 200,
    }).then((res) => {
      this.goods = res.rows.sort((a, b) => a.id - b.id);
      this.Bigbg = this.goods.slice(76, 77)[0].s_goods_photos[0].path;
      this.accimg = this.goods.slice(77, 78)[0].s_goods_photos[0].path;
      this.scanimg = this.goods.slice(78, 79)[0].s_goods_photos[0].path;
      this.penguin = this.goods.slice(81, 82)[0].s_goods_photos[0].path;
      this.QRimg = this.goods.slice(80, 81)[0].s_goods_photos[0].path;
      this.QRimg2 = this.goods.slice(79, 80)[0].s_goods_photos[0].path;
    });
  },
  methods: {
    // 账号
    Accountlogin() {
      this.who = "Scanlogin";
      this.isshow2 = false;
    },
    // 扫码
    Scanlogin2() {
      this.who = "Account";
      this.isshow2 = true;
    },
  },
};
</script>
    
<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding-top: 230px;
  position: relative;
  .login-modal {
    width: 380px;
    margin: 0 auto;
    // height: 600px;
    background-color: #fff;
    position: relative;
    .select {
      cursor: pointer;
      .acc-img {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
      }
      .scan-img {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 3;
      }
    }
  }
  .footer {
    width: 100%;
    p {
      color: #9b9b9b;
      font-size: 12px;
      text-align: center;
      position: absolute;
      bottom: 20px;
      left: 39%;
    }
  }
}
</style>